<template>
  <div id="map" class="mapC"></div>
</template>

<script>
import 'ol/ol.css'
import KML from 'ol/format/KML'
import Map from 'ol/Map'
import VectorSource from 'ol/source/Vector'
import View from 'ol/View'
import XYZ from 'ol/source/XYZ'
import {Tile as TileLayer, Vector as VectorLayer} from 'ol/layer'
export default {
  name: 'index',
  data () {
    return {}
  },
  mounted () {
    this.initMap()
  },
  methods: {
    initMap () {
      const raster = new TileLayer({
        source: new XYZ({
          // attributions: attributions,
          url: '/mapServe/tdt/map/{z}/{x}/{y}.png',
          maxZoom: 20
        })
      })

      const raster1 = new TileLayer({
        source: new XYZ({
          // attributions: attributions,
          url: '/mapServe/tdt/mapi/{z}/{x}/{y}.png',
          maxZoom: 20
        })
      })

      const vector = new VectorLayer({
        source: new VectorSource({
          url: 'zlocal/data/kml/2012-02-10.kml',
          format: new KML()
        })
      })

      const map = new Map({
        layers: [raster, raster1, vector],
        target: document.getElementById('map'),
        view: new View({
          center: [876970.8463461736, 5859807.853963373],
          projection: 'EPSG:3857',
          zoom: 10
        })
      })

      const displayFeatureInfo = function (pixel) {
        const features = []
        map.forEachFeatureAtPixel(pixel, function (feature) {
          features.push(feature)
        })
        if (features.length > 0) {
          const info = []
          let i, ii
          for (i = 0, ii = features.length; i < ii; ++i) {
            info.push(features[i].get('name'))
          }
          // document.getElementById('info').innerHTML = info.join(', ') || '(unknown)'
          map.getTarget().style.cursor = 'pointer'
        } else {
          // document.getElementById('info').innerHTML = '&nbsp;'
          map.getTarget().style.cursor = ''
        }
      }

      map.on('pointermove', function (evt) {
        if (evt.dragging) {
          return
        }
        const pixel = map.getEventPixel(evt.originalEvent)
        displayFeatureInfo(pixel)
      })

      map.on('click', function (evt) {
        displayFeatureInfo(evt.pixel)
      })
    }
  }
}
</script>

<style scoped>

</style>
